<!--
 * @Author: LAB
 * @Date: 2021-05-19 10:12:35
 * @Description: 过滤器
 * @FilePath: \HisDrugWeb\client-app\src\views\drug\components\tool-bar.vue
-->
<template>
  <div>
    <DxToolbar v-bind="toolbarOptions" ref="toolbar">
      <!-- @item-context-menu="rightContext" -->
      <template #word="{ data: word }">
        <p>{{ word }}</p>
      </template>
    </DxToolbar>
    <div>
      <el-tag
        @click="setPosition(item)"
        effect="plain"
        type="info"
        class="search-item"
        v-for="(item, index) in searchDrugInfoList"
        :key="index"
      >
        {{ item.drugInfo.name }}
      </el-tag>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Emit, Inject, Prop, Ref, Watch } from "vue-property-decorator";
import DxButton from "devextreme-vue/button";
import { dxButtonOptions } from "devextreme/ui/button";
import DxToolbar, { DxItem } from "devextreme-vue/toolbar";
import { dxToolbarOptions } from "devextreme/ui/toolbar";
import notify from "devextreme/ui/notify";
import { dxSelectBoxOptions } from "devextreme/ui/select_box";
import {
  DrugClient,
  DrugSchemeClient,
  DrugSchemeSubmitDTO,
  OutputSearchForDrug,
} from "@/api/api_drugclient";
import { ApiExceptionShow } from "@/utils/api-exception-show";
import { ApiTool } from "@/api/api-tool";
import { Tool } from "@/utils/tool";
import { RightContextI } from "@/framework/components/right-menu/right-menu.vue";
import { SearchByURL } from "@/utils/search-byurl";
import { dxTextBoxOptions } from "node_modules/devextreme/ui/text_box";
import { ElTag } from "element-plus";
let self: HisToolBar;
let searchByURL: SearchByURL;
// const menuList:any[]=[]
@Options({
  components: {
    // DxForm,
    // DxCheckBox,
    // DxTextBox,
    // DxButton,
    DxToolbar,
    DxItem,
    ElTag,
  },
})
export default class HisToolBar extends Vue {
  @Inject()
  apiTool: ApiTool;
  client: DrugSchemeClient;
  readonly menuList: any[] = [];
  searchValue: string;
  get drugSchemeId() {
    return (this.$route.query.drugSchemeId || "") as string;
  }
  @Ref()
  toolbar: DxToolbar;

  toolbarOptions: dxToolbarOptions = {
    items: [
      {
        location: "before",
        template() {
          return "目录方案";
        },
      },
      {
        options: {
          width: 270,
          items: this.menuList,
          valueExpr: "drugSchemeId",
          displayExpr: "name",
          stylingMode: "outlined",
          placeholder: "请选择",
          onValueChanged: (args) => {
            // 相同不重新赋值,赋值会导致清空其子项
            if (self.drugSchemeId != args.value) {
              searchByURL.setParamsToUrl({ drugSchemeId: args.value });
            }
          },
        },
        location: "before",
        locateInMenu: "auto",
        widget: "dxSelectBox",
      },
      {
        location: "before",
        template() {
          return "查找";
        },
      },
      {
        options: {
          width: 270,
          items: [],
          stylingMode: "outlined",
          placeholder: "请输入",
          onValueChanged: (args) => {
            let value = args.value;
            if (!value) {
              return;
            }
            self.apiTool
              .createClient(DrugClient)
              .positioningForDrug({
                searchText: value,
                page: {
                  index: 0,
                  pageSize: 20,
                },
                schemeId: self.drugSchemeId,
              })
              .then((result) => {
                if (result.isSuccess) {
                  this.searchDrugInfoList = result.listData;
                }
              });
          },
          mode: "search",
        } as dxTextBoxOptions,
        location: "before",
        locateInMenu: "auto",
        widget: "dxTextBox",
      },
      // {
      //   location: "before",
      //   options: {
      //     text: "定位",
      //     type: "default",
      //     stylingMode: "contained",
      //     onClick() {
      //       console.log("value", self.searchValue);
      //     },
      //   } as dxButtonOptions,
      //   widget: "dxButton",
      // },
      // {
      //   location: "after",
      //   options: {
      //     text: "保存",
      //     type: "default",
      //     stylingMode: "contained",
      //   } as dxButtonOptions,
      //   widget: "dxButton",
      // },
      {
        options: {
          text: "存储库房设置",
          onClick: function (e) {
            console.log("存储库房设置", e, self);
            self.$router.push("/storeroom");
          },
        },
        locateInMenu: "always",
        widget: "dxButton",
      },
      {
        options: {
          text: "储备限量设置",
          onClick: function (e) {
            console.log("存储库房设置", e, self);
            self.$router.push("/store-length");
          },
        },
        locateInMenu: "always",
        widget: "dxButton",
      },
      {
        options: {
          text: "发药规则设置",
          onClick: function (e) {
            self.$router.push("/dispensing-rules");
          },
        },
        locateInMenu: "always",
        widget: "dxButton",
      },
      {
        options: {
          text: "对应处方设置",
          onClick: function (e) {
            self.$router.push("/drug-corresponding-prescription");
          },
        },
        locateInMenu: "always",
        widget: "dxButton",
      },
      {
        options: {
          text: "厂牌供应商管理",
          onClick: function (e) {
            self.$router.push("/label-supply");
          },
        },
        locateInMenu: "always",
        widget: "dxButton",
      },
    ],
  };

  searchDrugInfoList: any[] = [];

  setPosition(item: OutputSearchForDrug | any) {
    let params = {
      drugSortId: item.sort,
      drugId: item.drugInfo.drugId,
      drugIndex: item.index,
    };
    searchByURL.setParamsToUrl(params);
  }
  // rightMenu = [
  //   {
  //     text: "新增",
  //     id: "add",
  //   },
  //   {
  //     id: "edit",
  //     text: "修改",
  //   },

  //   {
  //     id: "enable",
  //     text: "启用",
  //   },
  //   {
  //     id: "disable",
  //     text: "禁用",
  //   },
  // ];
  // @Inject()
  // rightContextOption: RightContextI;
  // //右键菜单初始化
  // rightContext(e) {
  //   this.rightContextOption.content = {
  //     id: "scheme",
  //     event: e,
  //   };
  //   this.rightContextOption.items = this.rightMenu;
  // }
  // // 右键菜单被点击
  // rightClick(event: CustomEvent) {
  //   let { detail = {} } = event;
  //   let itemData = detail.event.itemData;
  //   let content = detail.content;
  //   if (content.id != "scheme") {
  //     return;
  //   }
  //   switch (itemData.id) {
  //     case "add":
  //       Tool.constArrayAssignment(this.menuList, [
  //         {
  //           name: "777",
  //           drugSchemeId: "777",
  //           sort: 1,
  //         },
  //       ]);
  //       console.log("this.menuList", this.menuList);
  //       break;

  //     default:
  //       break;
  //   }
  // }

  // selectBox回显数据
  setDrugSchemeId(drugSchemeId) {
    self.toolbar.instance.option("items[1].options.value", drugSchemeId);
    // searchByURL.setParamsToUrl({ drugSchemeId });
  }
  // 获取方案列表
  getMenuList() {
    return this.client
      .page({
        index: 0,
        pageSize: 100,
      })
      .then(
        (res) => {
          if (res.isSuccess) {
            return res.listData;
          } else {
            notify(res.message, "error", 2000);
            return [];
          }
        },
        (err) => {
          ApiExceptionShow.showException(err, this);
          return [];
        }
      );
  }
  // 添加方案
  addMenu(item: DrugSchemeSubmitDTO) {
    this.client.submit(item).then((res) => {
      if (res.isSuccess) {
        notify(res.message || "添加成功", "success", 2000);
      }
    });
  }
  created() {
    self = this;
    searchByURL = new SearchByURL(this.$router);
    this.client = this.apiTool.createClient(DrugSchemeClient);
  }
  async mounted() {
    let drugSchemeId = (this.$route.query.drugSchemeId || "") as string;
    // document.addEventListener("rightContext", this.rightClick);
    let list = await this.getMenuList();
    Tool.constArrayAssignment(this.menuList, list);
    if (list.length) {
      // 回显
      if (this.drugSchemeId) {
        this.setDrugSchemeId(drugSchemeId);
      }
      // 默认第一条
      else {
        this.setDrugSchemeId(list[0].drugSchemeId);
        searchByURL.setParamsToUrl({ drugSchemeId: list[0].drugSchemeId });
      }
    }
  }
  beforeUnmount() {
    // document.removeEventListener("rightContext", this.rightClick);
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  padding: 12px 19px;
  .range {
    display: flex;
    align-items: flex-start;
    p {
      word-break: keep-all;
      padding: 9px;
    }
    > div {
      display: flex;
      width: 180px;
      flex-wrap: wrap;
    }
  }
  .input-box {
    display: flex;
    margin-bottom: 12px;
    p {
      padding: 9px;
    }
  }
}
.search-item {
  margin-right: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}
</style>
<style lang="scss">
.filter-container {
  background-color: #eee;
  .range {
    > div {
      > div {
        width: 50%;
        margin: 12px 0;
      }
    }
  }
}
</style>